<!--最基础的 select 版本的选择字段-->
<template>
  <a-select
    v-show="visible"
    size="small"
    placeholder="请选择"
    :disabled="disabled"
    :value="value"
    @change="onColumnChange"
  >
    <template v-if="filterColsType === undefined || filterColsType === 'all'">
      <a-select-option v-for="column in storeColumnList" :key="column.name">
        {{ column.name }}
      </a-select-option>
    </template>
    <template v-else>
      <a-select-option
        v-for="column in filterColumn(filterColsType)"
        :key="column.name"
      >
        {{ column.name }}
      </a-select-option>
    </template>
  </a-select>
</template>

<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator'

interface IColumn {
  desc: string
  name: string
}

type ColumnType = 'number' | 'string' | 'all'

const columnTypeMapping = {
  VARCHAR: 'varchar',
  DATE: 'date',
  INT: 'int',
  DECIMAL: 'decimal',
  TEXT: 'text',
  JSON: 'json',
  ARRAY: 'array',
}

@Component
export default class SimpleColumnSelect extends Vue {
  @Prop({ default: '' }) value!: any
  @Prop({ default: () => [] }) storeColumnList!: IColumn[]
  @Prop({ default: undefined }) filterColsType?: ColumnType
  @Prop({ default: false }) disabled!: boolean
  @Prop({ default: true }) visible!: boolean

  public filterColumn(type: ColumnType) {
    let filteredCols: IColumn[]

    switch (type) {
      case 'number': {
        filteredCols = this.storeColumnList.filter(
          (item: any) =>
            item.desc === columnTypeMapping.INT ||
            item.desc === columnTypeMapping.DECIMAL
        )
        break
      }
      case 'string': {
        filteredCols = this.storeColumnList.filter(
          (item: any) =>
            item.desc === columnTypeMapping.VARCHAR ||
            item.desc === columnTypeMapping.DATE ||
            item.desc === columnTypeMapping.TEXT
        )
        break
      }
      default:
        filteredCols = this.storeColumnList
    }
    return filteredCols
  }

  private onColumnChange(value: string) {
    this.$emit('change', value)
  }
}
</script>
